body{
  padding: 0;
  margin:0;
}
.container{

  min-width: 500px;
  max-width: 800px;
  min-height: 500px;
  margin: 0 auto;
}

.container > header{
  /* border: 1px solid transparent; */
  padding: 15px;
  border-radius: 20px 20px 0 0;
  background-color: #5f3c23;

}

.container > header hground{

}

.container > header h1{
  color: #faa755;
}

.container > header h2{
  color: #73b9a2;
}

.container > header p{
  color: #f69c9f;
}

.container > nav{
  background:linear-gradient(#8f4b2e,white);
}

.container > nav > ul > li{
  list-style: none;
  display: inline-block;
  position: relative;
}

.container > nav > ul > li:hover > ul{
  display: block;
}

.container > nav > ul > li > ul{
  display: none;
  width: 150px;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 30px;
  background: linear-gradient(black,#905d1d);
}

.container > nav > ul > li > ul > li{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.container > nav > ul> li> ul >li:hover>ul{
  display: block;
}


.container > nav > ul> li> ul >li>ul {
  display: none;
  left: 120px;
  width: 150px;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 0px;
  background-color: #111;
}

.container > nav > ul> li> ul >li>ul>li{
  list-style: none;
}


.container > nav a{
  text-decoration: none;
  line-height: 30px;
  padding: 10px;
}

a:link,a:visited,a:active{
  color: white;
}

a:hover{
  font-size: 13pt;
}

.main{
  border: 1px solid #eee;
  min-height: 300px;
}

.main > section{
  margin: 10px;
  border:1px solid red;
  height: 100px;
}

/* --------------------------------------------------------------------- */


@media (min-width:800px) {
  .container{
    min-width: 500px;
    max-width: 800px;
    min-height: 500px;
    margin: 0 auto;
  }

  .container>nav>ul>li{
    list-style: none;
    display: inline-block;
    position: relative;
  }

  .container >nav >a{
    display: none;
  }
}

@media (max-width:799px) {

  .container >nav >a{
    display: block;
  }

  .container >nav >ul{
    padding-left: 10px;
    display: none;
  }

  .container >nav >ul >li{
    list-style: none;
    position: relative;
  }

  .container >nav >ul.open{
    display: block;
  }
}
